import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Modal, message, Spin } from 'antd';
import { CloseOutlined } from '@ant-design/icons';

const mapStateToProps = (state: any) => ({
  VehicleMng: state.VehicleMng,
});
class UnbindModal extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      isRequested: false,
      resData: {},
    };
  }

  componentDidUpdate(prevProps: any) {
    const { modalVisible, formData } = this.props;
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
    }
  }
  //关闭解绑
  cancelUnBind = () => {
    const { closeModal } = this.props;
    this.setState({
      isRequested: false,
      resData: {},
    });
    closeModal();
  };
  //确定解绑
  handleToUnBind = () => {
    const { dispatch, freshPage, closeModal, formData } = this.props;
    this.setState({
      loading: true,
      isRequested: true,
    });
    const params = {
      vin: formData.vin,
      cboxCode: formData.cboxCode,
    };
    dispatch({
      type: 'VehicleMng/postObjWithRes',
      payload: {
        url: '/msalcohollock/vehicle/unbind/device',
        ...params,
      },
      callback: (res: any) => {
        this.setState({ resData: res });
        if (res.statusCode === '0') {
          message.success('解绑成功');
          this.cancelUnBind();
          freshPage();
        } else {
          message.warning('解绑失败,请重试');
        }
      },
    }).finally(() =>
      this.setState({
        loading: false,
      }),
    );
  };
  render() {
    const { formData, modalVisible, closeModal } = this.props;
    const { loading, isRequested, resData } = this.state;
    const resDom = (
      <div style={{ textAlign: 'center' }}>
        {loading ? (
          <Spin
            size="large"
            tip={
              <div style={{ color: 'black' }}>
                <p>绑定关系解除中...</p>
                <span>正在删除控制盒监控激活信息</span>
              </div>
            }
          />
        ) : (
          <div>
            {resData.statusCode === '0' ? (
              '解绑成功'
            ) : (
              <>
                <CloseOutlined style={{ fontSize: 40, color: 'red' }} />
                <div>
                  <p>解绑失败</p>
                  <span>{resData.statusMessage}</span>
                </div>
              </>
            )}
          </div>
        )}
      </div>
    );
    return (
      <Modal
        // footer={footers}
        visible={modalVisible}
        width={350}
        centered={true}
        onCancel={this.cancelUnBind}
        onOk={this.handleToUnBind}
        okButtonProps={{ loading: loading }}
        title={'解绑设备'}
      >
        {!isRequested ? `确定要解除车辆${formData.vin}与手持机、控制盒的绑定关系吗？` : resDom}
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(UnbindModal);
